<template>
  <div class="salesAnalysis">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24">
        <a-card>
          <div slot="title">
            <span>类目支付金额占比</span>
          </div>
          <div>
            <DiskChart
              class="goods"
              :dataList="loadData2"
              :dataValue="loadDataValue"
              :totalSales="totalSales"
              width="100%"
              height="600px"
              v-if="show"
            />
          </div>
        </a-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <a-card>
          <div slot="title">
            <span>分类支付金额</span>
          </div>
          <div>
            <a-table rowKey="id" :columns="tableOption1" :dataSource="loadData1" :pagination="false" :loading="loading1"
              ><template slot-scope="text, record, index" slot="indexLabel">
                <span>{{ index + 1 }}</span>
              </template></a-table
            >
          </div>
        </a-card>
      </el-col>

      <el-col :xs="24" :sm="12">
        <a-card>
          <div slot="title">
            <span>商品销量榜</span>
          </div>
          <div>
            <a-table
              rowKey="id"
              :columns="tableOption3"
              :dataSource="loadData3"
              :pagination="false"
              :loading="loading1"
            >
              <template slot-scope="text, record, index" slot="indexLabel">
                <span>{{ index + 1 }}</span>
              </template>
            </a-table>
          </div>
        </a-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <a-card>
          <div slot="title">
            <span>商品营收榜</span>
          </div>
          <div>
            <a-table rowKey="id" :columns="tableOption4" :dataSource="loadData4" :pagination="false" :loading="loading1"
              ><template slot-scope="text, record, index" slot="indexLabel">
                <span>{{ index + 1 }}</span>
              </template></a-table
            >
          </div>
        </a-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DiskChart from '@/components/Charts/DiskChart.vue'
import { tableOption1, tableOption3, tableOption4 } from './index.config.js'
import { dataCenterGoodsInfo } from '@/api/shop/dataReport/goodsData.js'

export default {
  components: {
    DiskChart,
  },
  data() {
    return {
      tableOption1,
      tableOption3,
      tableOption4,
      loadData1: [],
      loadData2: [],
      loadDataValue: [],
      loadData3: [],
      loadData4: [],
      loading1: false,

      totalSales: `${0}\n\n总销量`, //总销量
      show: false,
    }
  },
  methods: {
    getList(searchForm, page) {
      if (searchForm) {
        console.log(searchForm)
        this.searchForm = searchForm
      }
      this.loading1 = true
      this.show = false
      dataCenterGoodsInfo(Object.assign({shopId: this.$store.getters.userInfoMessage.shopId}, this.searchForm)).then((val) => {
        let data = val.data
        this.loading1 = false
        if (data.typeIdAmtList[0] != null ) {
          this.loadData2 = []
          this.loadDataValue = []
          var num = 0
          data.typeIdAmtList.forEach((item) => {
            this.loadData2.push(item.category)
            this.loadDataValue.push({
              value: item.amt,
              name: item.category,
            })
            // num += parseInt(item.amt)
            num = item.allAmt
          })
          this.totalSales = `${num?num:0}\n\n总销量`
          console.log(this.loadData2)
          this.show = true
        }else{
          this.show = false
        }

        this.loadData1 = data.cateIdAmtList
        this.loadData3 = data.salesList
        this.loadData4 = data.revenueList
        
      })
    },
  },
}
</script>
<style lang="less" scoped>
.salesAnalysis {
  .box-card {
    min-height: 500px;
  }
  .el-col {
    margin-bottom: 8px;
  }
}
</style>